import React, { Component } from 'react'
import Taro, { getCurrentInstance } from '@tarojs/taro'
import { View, Text, Image, ScrollView } from '@tarojs/components'
import { AtCountdown } from 'taro-ui'
import { SpGoodsItem, SpGoodsItemSeckill, SpImage } from '@/components'
import { calcTimer, classNames, isWeb, linkPage, getDistributorId, pickBy } from '@/utils'
import doc from '@/doc'

import './goods-scroll.scss'

export default class WgtGoodsScroll extends Component {
  static options = {
    addGlobalClass: true,
    info: null
  }

  constructor(props) {
    super(props)

    this.state = {
      timer: null
      // boxHeight: null
    }
  }

  setTimer() {
    const { info } = this.props
    const { config } = info
    if (config.lastSeconds) {
      const timer = calcTimer(config.lastSeconds)
      this.setState({
        timer
      })
    }
  }

  componentDidMount() {
    this.setTimer()
    // if (this.props.info.data.length > 0) this.getDom()
  }

  navigateTo(url) {
    Taro.navigateTo({ url })
  }

  handleClickItem(item) {
    const { distributor_id, goodsId } = item
    // const dtid = distributor_id ? distributor_id : getDistributorId()
    Taro.navigateTo({
      url: `/pages/item/espier-detail?id=${goodsId}&dtid=${distributor_id || 0}`
    })
  }

  navigateToList = (type, seckillId) => {
    if (type === 'goods') {
      this.navigateTo(`/pages/item/list?dis_id=${this.props.dis_id || ''}`)
    } else if (type === 'limitTimeSale') {
      Taro.navigateTo({
        url: `/marketing/pages/item/seckill-goods-list?seckill_type=limited_time_sale&seckill_id=${seckillId}&dis_id=${
          this.props.dis_id || ''
        }`
      })
    } else {
      Taro.navigateTo({
        url: `/marketing/pages/item/seckill-goods-list?seckill_type=normal&seckill_id=${seckillId}&dis_id=${
          this.props.dis_id || ''
        }`
      })
    }
  }

  handleClickMore = () => {
    const { config } = this.props.info
    const { moreLink = {} } = config
    if (moreLink) {
      linkPage(moreLink)
    } else {
      this.navigateToList(config.type, config.seckillId)
    }
  }

  render() {
    const { info } = this.props
    if (!info) {
      return null
    }
    const { base, data, config, more } = info
    const { timer, boxHeight } = this.state
    let goods = pickBy(data, doc.goods.WGT_GOODS_GRID)
    let seckillGoods = goods.length > 3 && config.type === 'seckill' ? goods.slice(0, 4) : goods
    return (
      <View className={`wgt wgt-goods-scroll ${base.padded ? 'wgt__padded' : null}`}>
        {base.title && (
          <View className='wgt-head'>
            <View className='wgt-hd'>
              <Text className='wgt-title'>{base.title}</Text>
              {config.type === 'goods' ? (
                <Text className='wgt-subtitle'>{base.subtitle}</Text>
              ) : (
                <View className='wgt-timer'>
                  {timer && config.lastSeconds != 0 ? (
                    <View>
                      <AtCountdown
                        format={{ day: '天', hours: ':', minutes: ':', seconds: '' }}
                        className='countdown__time'
                        isShowDay
                        day={timer.dd}
                        hours={timer.hh}
                        minutes={timer.mm}
                        seconds={timer.ss}
                        onTimeUp={() => {
                          this.setState({
                            timer: null
                          })
                        }}
                      />
                    </View>
                  ) : (
                    <View className='countdown__time'>
                      {config.status === 'waiting' ? '活动待开始' : '活动已结束'}
                    </View>
                  )}
                </View>
              )}
            </View>
            {/* {config?.moreLink?.linkPage && (
              <View className='wgt-more' onClick={this.handleClickMore}>
                <View className='three-dot'></View>
              </View>
            )} */}
          </View>
        )}
        <View className='wgt-body'>
          {config.type === 'seckill' ? (
            <View
              className={classNames('scroll-goods', goods.length > 3 ? 'seckill-goods' : '')}
              onClick={this.handleClickMore}
              style={{display: 'flex',
                justifyContent: 'space-between',
                alignItems: 'center'}}
            >
              {seckillGoods.map((item, idx) => (idx<3&&
                <View className={classNames('kill-item')}  key={`goodsscroll-item__${idx}`}>
                  <SpGoodsItemSeckill
                    info={item}
                    key={`scroll-goods-item__${idx}`}
                    mode='aspectFill'
                    renderFooter={
                      <View className='kill-item-bt'>
                        <Text className='kill-item-proce' style={{left:'-3px'}}>
                          <Text className='rmbSymbol'>￥</Text>
                          {item.activityPrice}
                        </Text>
                      </View>
                    }
                  />
                </View>
              ))}
            </View>
          ) : (
            // <ScrollView className='kill-list' scrollX onClick={this.handleClickMore}>
            //   {goods.map((item, idx) => (
            //     <View className='kill-list-item' key={`kill-${idx}`}>
            //       <Image src={item.pic} className='kill-list-item-img'></Image>
            //       <Image
            //         src={`${process.env.APP_IMAGE_CDN}/seckill_bg01.png`}
            //         className='kill-list-item-bg'
            //       ></Image>
            //       <Text className='kill-list-item-proce'>
            //         ￥{item.activityPrice / 100 || item.price / 100}
            //       </Text>
            //     </View>
            //   ))}
            // </ScrollView>
            <ScrollView className='scroll-goods' scrollX>
              {goods.map((item, idx) => (
                <View className={classNames('scroll-item')} key={`goodsscroll-item__${idx}`}>
                  {config.leaderboard && (
                    <View className='subscript'>
                      <View className='subscript-text'>NO.{idx + 1}</View>
                      <SpImage className='subscript-img' src='paihang.png' />
                    </View>
                  )}
                  <SpGoodsItem
                    showPrice={config.showPrice}
                    info={item}
                    key={`scroll-goods-item__${idx}`}
                    mode='widthFix'
                    lazyLoad
                  />
                </View>
              ))}

              {(config?.moreLink?.linkPage || config?.moreLink?.linkUrl) && (
                <View className='more-link' onClick={this.handleClickMore}>
                  {base.backgroundImg && (
                    <SpImage circle={16} src={base.backgroundImg} mode='aspectFill' />
                  )}
                  {!base.backgroundImg && <View className='text'>查看更多</View>}
                </View>
              )}
            </ScrollView>
            // <View className='goods'>
            //   {goods.map((item, idx) => (
            //     <View className='goods-item' key={`goodsscroll-item__${idx}`}>
            //       <Image className='goods-item-img' src={item.pic}></Image>
            //       <View className='goods-item-price'>
            //         ￥{item.activityPrice / 100 || item.price / 100}
            //       </View>
            //       <View className='goods-item-marketPrice'>￥{item.marketPrice / 100}</View>
            //     </View>
            //   ))}
            // </View>
          )}
        </View>
      </View>
    )
  }
}
